<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>操作日志列表--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>

<body class="childrenBody">
    <table id="table1" class="layui-table" lay-filter="table1"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
              <button class="layui-btn" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
              <button class="layui-btn layui-btn-normal" lay-event="addMenu"><i class="layui-icon">&#xe654;</i>新增菜单</button>
              <button class="layui-btn " lay-event="fold"><i class="layui-icon">&#xe623;</i>全部收缩</button>
              <button class="layui-btn" lay-event="expand"><i class="layui-icon">&#xe625;</i>全部展开</button>
        </div>
      </script>

    <!-- 操作列 -->
    <script type="text/html" id="oper-col">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script>
        layui.config({
            base: '../../module/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['layer', 'table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;

            // 渲染表格
            var renderTable = function () {
                layer.load(2);
                treetable.render({
                    toolbar: '#toolbarDemo',
                    treeColIndex: 1,
                    treeSpid: -1,
                    treeIdName: 'id',
                    treePidName: 'pid',
                    treeDefaultClose: false,
                    treeLinkage: false,
                    elem: '#table1',
                    url: contextPath + '/sys/menu/queryMenuList',
                    page: false,
                    cellMinWidth: 95,
                    cols: [[
                        { type: 'numbers' },
                        { field: 'title', title: '菜单', width: 200 },
                        {
                            field: 'icon', title: '图标', align: "center", templet: function (d) {
                                return '<i class="layui-icon" style="font-size: 50px; color: #1AA094;">' + d.icon + '</i>'
                            }
                        },
                        { field: 'href', title: '链接URL', width: 300 },
                        {
                            field: 'type', title: '类型', align: "center", templet: function (d) {
                                if (d.type == "菜单") {
                                    return '<span style="color: green;">' + d.type + '</span>'
                                } else {
                                    return '<span style="color: blue;">' + d.type + '</span>'
                                }
                            }
                        },
                        { field: 'id', title: 'ID', align: "center" },
                        { field: 'pid', title: 'PID', align: "center" },
                        { title: '操作', templet: '#oper-col', width: 160, fixed: "right", align: "center" }
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
            };

            renderTable();

            //监听工具条
            table.on('tool(table1)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'delete') {
                    layer.msg('删除' + data.id);
                } else if (layEvent === 'edit') {
                    layer.msg('修改' + data.id);
                }
            });

            //头工具栏事件
            table.on('toolbar(table1)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'fold':
                        treetable.foldAll('#table1');
                        break;
                    case 'expand':
                        treetable.expandAll('#table1');
                        break;
                    case 'refresh':
                        renderTable();
                        break;
                    case 'addMenu':

                        break;
                };
            });
        });
    </script>
</body>

</html>